Cloudflare Workers
#technology #Cloudflare
https://gyazo.com/300fd6b68a4ff5d0bd91868af8f21ef2
Cloudflare Workers って何よ?
Cloudflare のエッヂロケーションで JS や wasm を動かせるサービス
Service Worker 互換の API が用意されている
無料枠あり!
演算能力はかなり制限されている
Cloudflare Workers KV でデータ永続化もできる
どういう用途が想定される?
高度なキャッシュ制御
リクエストの中身見てキャッシュを返したり
KV で切り替えしたり
シンプルな公開 API
OGP 取得してきて成形したり
IkaPri みたいに SVG 生成したり
Slack とかの webhook で動くアプリケーションとか
動的なプロキシ
レスポンスの中身を差し替えたり
SPA のアプリケーションに OGP を注入したり
upstream の自動切り替えとか
こういうのは工夫しないと厳しそう
画像いじる系
sharp や node-canvas は動かせなさそう(バイナリ実行が無理)
wasm でごにょごにょすればできると思う、多分…
どのみち演算能力の制限(CPU 時間制限)がキツいかも
でかいアプリケーション
あなたは Service Worker にビジネスロジックを全て押し込みますか?
ことはじめ
Cloudflare のアカウント作る
(必要があれば)DNS を仕向ける
好きなドメインで Worker を動かすなら
CNAME で仕向けても
Nameserver を移管しても
どっちでも良い
ダッシュボードから Workers を開く
https://gyazo.com/e1398141e78effdad3dd384e016641ec
こいつ
作成ボタン押下
https://gyazo.com/389a6cbdef984cea1529f3706caca741
こいつ
あとは Web UI からでも Wrangler でも
良い所
TypeScript で書ける
厳しい所
Wrangler が dev で動いている時によくクラッシュする
watch してて突然こける
Wrangler から fork した node は自分で介錯してあげないといけない
視聴者プレゼント
TypeScript テンプレート
公式のはちゃんと動かない(最悪情報)
code:package.json
{
"author": "Rokoucha <git@rokoucha.net>",
"license": "UNLICENSED",
"main": "worker/index.js",
"name": "cloudflare-workers-typescript-template",
"private": true,
"version": "1.0.0",
"devDependencies": {
"@cloudflare/workers-types": "^2.2.1",
"@cloudflare/wrangler": "^1.15.0",
"ts-loader": "^8.1.0",
"typescript": "^4.2.4",
"webpack": "^5.31.0"
},
"scripts": {
"dev": "wrangler dev",
"build": "wrangler build",
"publish": "wrangler publish"
}
}
code:.gitignore
# Cloudflare Workers
worker/
code:tsconfig.json
{
"compilerOptions": {
"target": "ES2018",
"module": "ESNext",
"lib": "ESNext", "WebWorker",
"noEmit": true,
"strict": true,
"moduleResolution": "node",
"types": "@cloudflare/workers-types",
"esModuleInterop": true
}
}
code:webpack.config.js
// @ts-check
const { join } = require('path')
/**
* @type{ import('webpack').Configuration }
*/
module.exports = {
mode: 'production',
module: {
rules: [
{
loader: 'ts-loader',
options: { transpileOnly: true },
test: /\.tsx?$/,
},
],
},
optimization: { usedExports: true },
output: { filename: 'worker.js', path: join(__dirname, 'dist') },
resolve: { extensions: '.ts', '.tsx', '.js', plugins: [] },
}
code:wrangler.toml
account_id = ""
name = "cloudflare-workers-typescript-template"
type = "webpack"
webpack_config = "webpack.config.js"
workers_dev = true